/*
 * @Author: wangqizhang
 * @Date: 2024-04-22 16:53:21
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-04 13:52:59
 * @FilePath: /suixinji-react/src/page/home/index.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import React from 'react';
import { Layout, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { Outlet } from 'react-router-dom';
import './index.scss';
const { Header, Footer, Sider, Content } = Layout;
import LeftMenu from './components/menu';
import FooterComp from './components/footer';
import HeaderComp from './components/header';
import MyContext from './context';
const menuRef = React.createRef<any>();
export default class Home extends React.Component {
  state: any;
  constructor(props: any) {
    super(props);
    this.state = {
      activeKey: '1',
    };
  }
  refreshMenu = () => {
    menuRef.current?.refreshMenu();
  };
  render() {
    const activeKey = this.state.activeKey;
    const items: TabsProps['items'] = [
      {
        key: '1',
        label: `自定义分组`,
      },
      {
        key: '2',
        label: `默认分组`,
      },
    ];
    return (
      <MyContext.Provider value={{ refreshMenu: this.refreshMenu }}>
        <Layout className="container">
          <Sider width="200" className="slide-color">
            <Tabs
              items={items}
              centered
              defaultActiveKey={'1'}
              onChange={(key) => {
                this.setState({
                  activeKey: key,
                });
              }}
            ></Tabs>

            <LeftMenu activeKey={this.state.activeKey} ref={menuRef}></LeftMenu>
          </Sider>
          <Layout>
            <Header>
              <HeaderComp></HeaderComp>
            </Header>
            <Content style={{ overflow: 'auto' }}>
              <Outlet></Outlet>
            </Content>
            <Footer className="flex-row flex-center align-center">
              <FooterComp></FooterComp>
            </Footer>
          </Layout>
        </Layout>
      </MyContext.Provider>
    );
  }
  componentDidMount() {
    console.log('组件已挂载');
  }

  componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{}>) {
    console.log('组件已更新');
  }

  componentWillUnmount() {
    console.log('组件将被卸载');
  }
}
